@import "tailwindcss";

@layer components {
    /* Separate
      ======================================================================== */
    .separate {
        @apply flex items-center text-center;
    }

    .separate::after,
    .separate::before {
        content: '';
        @apply border-b border-secondary-200 flex-1;
    }

    .separate:not(:empty)::after {
        @apply ml-2;
    }

    .separate:not(:empty)::before {
        @apply mr-2;
    }
}

/* 添加自定义颜色变量以支持 border-secondary-200 */
@theme {
    /* 将 primary 整个色阶映射到内置的 blue */
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);

    /* 将 secondary 整个色阶映射到内置的 gray */
    --color-secondary-50: var(--color-gray-50);
    --color-secondary-100: var(--color-gray-100);
    --color-secondary-200: var(--color-gray-200);
    --color-secondary-300: var(--color-gray-300);
    --color-secondary-400: var(--color-gray-400);
    --color-secondary-500: var(--color-gray-500);
    --color-secondary-600: var(--color-gray-600);
    --color-secondary-700: var(--color-gray-700);
    --color-secondary-800: var(--color-gray-800);
    --color-secondary-900: var(--color-gray-900);
    --color-secondary-950: var(--color-gray-950);

    /* 可选：给不带色阶的简写指定一个默认深度（方便用 text-primary / bg-secondary） */
    --color-primary: var(--color-primary-600);
    --color-secondary: var(--color-secondary-600);
}
